import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import SearchView from '@/views/SearchView.vue'
import NotFound from '@/views/NotFound.vue'
import MyView from '@/views/MyView.vue'

//  query查询参数方式
// const routes = [
//   { path: '/home', component: HomeView },
//   { path: '/search', component: SearchView }
// ]

// 动态路由获取参数
//words必须要传递  但是可以用可选连?
const routes = [
  { path: '/home', name: 'home', component: HomeView },
  { path: '/search/:words?', name: 'search', component: SearchView },
  { path: '/my', name: 'my', component: MyView },
  //重定向   就是强制跳转到某个页面
  { path: '/', redirect: '/home' },
  // 404 NotFound
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }
]

//懒加载
// 懒加载的路由页面，默认不会下载到用户的浏览器中
// 访问对应路由的时候才会去加载
// const routes = [
//   { path: '/home', name: 'home', component: () => import('@/views/HomeView.vue') },
//   { path: '/search/:words?', name: 'search', component: () => import('@/views/SearchView.vue') },
//   //重定向   就是强制跳转到某个页面
//   { path: '/', redirect: '/home' },
//   // 404 NotFound
//   { path: '/:pathMatch(.*)*', name: 'NotFound', component: () => import('@/views/NotFound.vue') }
// ]

const router = createRouter({
  //hash 模式的url中有#
  //history模式没有# url 更为精美(较为常用的模式)
  // history: createWebHashHistory(),
  history: createWebHistory(),

  routes
})

export default router
